<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    Vue 模板语法有2大类
        1.插值语法：
            功能：用于解析标签内容
            写法：{{xxx}}, xxx会作为表达式解析, 它会自动读取 data 中的属性
        2.指令语法：
            功能：用于解析标签(标签属性、标签内容、绑定事件)
            举例：v-bind:href="xxx" 或简写为 :
            备注：Vue 中有很多的指令，此处我们只是拿 v-bind 举个栗子
-->
<div id="root">
    <!-- 准备一个容器 -->
    <h2>插值语法</h2>
    <h4>你好，{{msg}}</h4>
    <h4>你好，{{msg.toUpperCase()}}</h4>
    <hr>
    <h2>指令语法</h2>
    <a v-bind:href="url">点我去学习1</a>
    <a :href="url">点我去学习2</a>
    <a href="http://www.atguigu.com/" :x="msg.toUpperCase()">点我去学习3</a>
</div>

<script>
    new Vue({
        el: '#root',
        data: {
            msg: 'atguigu',
            url: 'http://www.atguigu.com/'
        }
    })
</script>
</body>
</html>
